<template>
  <section class="container-center flex flex-col overflow-hidden">
    <ul class="flex justify-between">
      <li class="flex flex-col items-center" v-for="(item, index) in overviewList" :key="index">
        <div class="img-box text-center pt-20px">
          <img class="tyg" src="@/assets/images/tyg.png" alt="" />
          <img :src="item.src" class="mb-2px" alt="" :width="item.width" />
        </div>
        <span class="mb-8px">{{ item.name }}</span>
        <strong>{{ item.value }}</strong>
      </li>
    </ul>
    <div class="bottom-container flex-1 overflow-hidden flex">
      <section class="l-content flex-1 mr-12px">
        <h2 class="title">堡垒指数</h2>
        <div class="mt-25px h-506px">
          <CdcTable :data="tableConfig1" :table-handler="tableHandler1"></CdcTable>
        </div>
      </section>
      <section class="r-content flex-1 ml-12px">
        <h2 class="title">先锋指数</h2>
        <div class="mt-25px h-506px">
          <CdcTable :data="tableConfig2" :table-handler="tableHandler2"></CdcTable>
        </div>
      </section>
    </div>
    <!-- 先锋指数 -->
    <vanguardIndex ref="refVanguard"></vanguardIndex>
    <!-- 堡垒指数 -->
    <prefortressIndex ref="refPrefortress"></prefortressIndex>
  </section>
</template>

<script setup lang="ts">
import CdcTable from '@/components/CdcTable/index.vue'
import prefortressIndex from '@/views/home/components/prefortressIndex.vue'
import vanguardIndex from '@/views/home/components/vanguardIndex.vue'
import { ref, onMounted, computed, reactive } from 'vue'
import { overview, blzsList, xfzsList } from '@/api'
import circle1 from '@/assets/images/c1.png'
import circle2 from '@/assets/images/c2.png'
import circle3 from '@/assets/images/c3.png'
import circle4 from '@/assets/images/c4.png'
import circle5 from '@/assets/images/c5.png'
import circle6 from '@/assets/images/c6.png'
const tableData1 = ref([])
const tableData2 = ref([])
// console.log(import.meta.env)
const tableConfig1 = computed(() => {
  return {
    columns: [
      {
        field: 'rank',
        type: 'html',
        title: '排&nbsp;名<span class="text-12px">(较上月浮动)</span>',
        slot: true,
      },
      { field: 'department_name', title: '党组织简称' },
      { field: 'score', title: '得分', width: 80 },
    ],
    showSeq: false,
    tableConfig: {
      data: tableData1.value,
      align: 'center',
      showSeq: true,
      'header-cell-class-name': 'headCellClass',
      'header-row-class-name': 'bg-#555 text-16px table-left text-#FDFDFB',
      'cell-class-name': function ({ columnIndex }) {
        return columnIndex === 1 ? 'cursor-pointer' : ''
      },
      'row-class-name': ({ $rowIndex }: any) => {
        return `${$rowIndex % 2 == 0 ? 'bg-transparent' : 'bg-#253542'} text-#FDFDFB text-20px`
      },
    },
  }
})
const tableConfig2 = computed(() => {
  return {
    columns: [
      {
        field: 'rank',
        type: 'html',
        title: '排&nbsp;名<span class="text-12px">(较上月浮动)</span>',
        slot: true,
      },
      { field: 'department_name', title: '党组织简称' },
      { field: 'score', title: '得分', width: 80 },
    ],
    showSeq: false,
    tableConfig: {
      data: tableData2.value,
      align: 'center',
      showSeq: true,
      'header-cell-class-name': 'headCellClass',
      'header-row-class-name': 'bg-#555 text-16px table-left text-#FDFDFB',
      'cell-class-name': function ({ columnIndex }) {
        return columnIndex === 1 ? 'cursor-pointer' : ''
      },
      'row-class-name': ({ $rowIndex }: any) => {
        return `${$rowIndex % 2 == 0 ? 'bg-transparent' : 'bg-#253542'} text-#FDFDFB text-20px`
      },
    },
  }
})
const tableHandler1 = {
  'cell-click': function ({ row }) {
    open(1, row)
  },
}
const tableHandler2 = {
  'cell-click': function ({ row }) {
    open(2, row)
  },
}
const refVanguard = ref()
const refPrefortress = ref()
const open = (num: number, row) => {
  if (num === 1) {
    // 堡垒指数
    refPrefortress.value?.open(row)
  } else if (num === 2) {
    // 先锋指数
    refVanguard.value?.open(row)
  }
}
const overviewList = ref([
  { name: '在职党支部数', value: 0, key: 'tjsj1', src: circle1, width: 38 },
  { name: '在职党员数', value: 0, key: 'tjsj2', src: circle2, width: 42 },
  { name: '离退休党支部', value: 0, key: 'tjsj3', src: circle3, width: 33 },
  { name: '离退休党员', value: 0, key: 'tjsj4', src: circle4, width: 40 },
  { name: '预备党员', value: 0, key: 'tjsj5', src: circle5, width: 40 },
  { name: '入党积极分子', value: 0, key: 'tjsj6', src: circle6, width: 40 },
])
const init = () => {
  overview().then((res) => {
    overviewList.value.forEach((item) => {
      item.value = res.data[0]?.statData[item.key] || 0
    })
  })
  // 堡垒指数
  blzsList().then((res) => {
    tableData1.value = res.data[0]?.statData.tjsj1 || []
    tableData1.value.forEach((v) => {
      if (v.last_rank) {
        v.direction =
          Number(v.rank) > Number(v.last_rank)
            ? 'bottom'
            : Number(v.rank) === Number(v.last_rank)
              ? '-'
              : 'top'
      } else {
        v.direction = 'top'
      }
    })
  })
  // 先锋指数
  xfzsList().then((res) => {
    tableData2.value = res.data[0]?.statData.tjsj1 || []
    tableData2.value.forEach((v) => {
      if (v.last_rank) {
        v.direction =
          Number(v.rank) > Number(v.last_rank)
            ? 'bottom'
            : Number(v.rank) === Number(v.last_rank)
              ? '-'
              : 'top'
      } else {
        v.direction = 'top'
      }
    })
    // console.log(tableData2.value)
  })
}
onMounted(() => {
  init()
})
</script>

<style lang="less" scoped>
.container-center {
  ul {
    padding: 0px 25px 30px;
    background: url('@/assets/images/rect.png') repeat center center;
    background-size: contain;
    li {
      flex: 0 0 15%;
      .img-box {
        position: relative;
        width: 100%;
        height: 160px;
        background: url('@/assets/images/c-bg.png') no-repeat center bottom;
        background-size: contain;
        .tyg {
          position: absolute;
          top: 0px;
          left: 0;
          width: 100%;
        }
      }
      span {
        font-size: 14px;
        color: #feffff;
      }
      strong {
        font-family: DS-Digital;
        font-size: 46px;
        color: #80c1d1;
      }
    }
  }
  .bottom-container {
    // padding-top: 100px;
    margin-top: -20px;
    padding: 100px 20px 20px 40px;
    background: url('@/assets/images/top-bg.png') no-repeat top center;
    h2.title {
      font-size: 40px;
      letter-spacing: 4px;
      color: #fff;
      font-family: HYk2gj;
      background: url('@/assets/images/icon_sanjiaoxin.png') no-repeat 200px center;
      background-size: 35px 31px;
    }
    .r-content {
      h2 {
        text-align: center;
        background: url('@/assets/images/icon_sanjiaoxin.png') no-repeat 315px center;
        background-size: 35px 31px;
      }
    }
  }
  /deep/ .table-left {
    background-image: url('@/assets/images/t-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
  /deep/ .headCellClass {
    &:not(:last-child) {
      .vxe-cell {
        border-right: 1px solid #fff;
      }
    }
  }
  /deep/ .headerRowClass {
    background-image: url('@/assets/images/t-bg.png');
  }
  /deep/ .vxe-table--render-wrapper {
    background-color: transparent;
    .vxe-table--body-wrapper {
      background-color: transparent;
    }
  }
}
</style>
